<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <c:url var="base" value="/"/>
    <base href="${base}">
    <meta charset="UTF-8">
    <title>东北林业大学软件工程专业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .area a{
            text-decoration: none;
            color: #2323f5;
        }
        .area a:hover{
            color: #001c85;
        }
        ul,li{
            list-style: none;
            padding: 10px 0;
        }
        .clear{
            clear: both;
        }
        .area{
            background: rgba(153, 255, 233, 0.9);
            padding: 20px;
            margin-top: 20px;
            border-radius: 10px;
        }
        .main{
            width: 60%;
            margin-left: 20%;
            margin-top: 0.5%;
            display: flex;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 10px;
        }
        .blank{
            height: 30px;
        }
        p{
            font-size: 20px;
        }
        .row{
            display: block;
            border:2px solid black;
            margin:1px
        }
        .row:hover{
            transform: scale(1.01,1.01);
            transition-duration: 0.05s;
        }
        .part{
            width: 45%;
            display: inline-block;
            overflow: hidden;
            word-break:keep-all;
            white-space:nowrap;
            -webkit-line-clamp: 1;
            -webkit-box-orient:vertical;
            text-overflow: ellipsis;
            padding:2px
        }
        .parts{
            text-align: right;
        }
        .part br{
            display: none;
        }

        .wrap {
            width: 78%;
            height: 400px;
            margin: 50px auto;
            perspective: 500px;
            position: relative;;
        }
        #wrap-ul {
            width: 100%;
            height: 400px;
            list-style: none;
            position: relative;

        }
        .wrap img {
            transition: all 1s ease 0s;
            width: 100%;
            height: 400px;
            display: inline-block;
            position: absolute;
            opacity: 0;
            z-index: -1;
        }
        .cc img {
            opacity: 1;
        }
        #wrap-ul li {
            width: 100%;
            height: 280px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .wrap span {
            width: 40px;
            height: 70px;
            background-color: rgba(0, 0, 255, .5);
            color: white;
            text-align: center;
            font-size: 50px;
            position: absolute;
            left: -60px;
            top: 40%;
            z-index: 11;
            cursor: pointer;
            opacity: .4;
            transition: all 0.5s ease 0s;
        }
        .wrap span:hover {

            opacity: 1;
        }
        .wrap #right-btn1 {
            right: -60px;
            left: auto;
        }

        .part1{
            width: 50%;
        }
        .part2{
            width: 50%;
            text-align: center;
        }
        .btn2 {
            width: 40%;
            margin: 5px;
            border: 1px black solid;
            display: inline-block;
            background-color: rgba(15, 213, 121, 0.9);
            color: white;
            padding: 20px 20px;
            text-decoration: none;
            text-align: center;
            border-radius: 5px;
            font-weight: 800;
            font-size: 20px;
        }
        .btn2:hover{
            box-shadow:0px 0px 10px 10px #188c2d;
            transform: scale(1.1,1.1);
            transition-duration: 0.1s;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        <%@include file="/WEB-INF/jsp/nav.jsp" %>
    </div>
    <div>
        <%@include file="/WEB-INF/jsp/logbutton.jsp" %>
    </div>
    <div class="main">
        <div class="wrap">
            <ul id="wrap-ul">
                <li class="b1"><img src="images/1.jpeg" alt=""></li>
                <li class="b1"><img src="images/2.jpeg" alt=""></li>
                <li class="cc"><img src="images/3.jpeg" alt=""></li>
                <li class="b1"><img src="images/4.jpeg" alt=""></li>
                <li class="b1"><img src="images/5.jpeg" alt=""></li>
            </ul>
            <span id="toleft1">&lt;</span>
            <span id="right-btn1">&gt;</span>
        </div>
    </div>
    <div class="main">
        <div class="part1">
            <div class="clear area">
                <h4 style="display: inline-block">新闻公告</h4><a style="float: right;color: #9ba2a2" href="newslist">...更多</a>
                <c:forEach items="${items2}" begin="0" end="4" var="w">
                    <div class="row"><a href="news?uid=${w.id}">
                        <div class="part">${w.name}</div>
                        <div class="part parts">${w.date}</div>
                    </a></div>
                </c:forEach>
            </div>
        </div>
        <div class="part2">
            <div class="blank"></div>
            <a class="btn2" href="https://www.nefu.edu.cn/">学校官网</a>
            <a class="btn2" href="https://icec.nefu.edu.cn/rcpy/bksjy/zsjz.htm">学院官网</a>
            <a class="btn2" href="https://jwc.nefu.edu.cn/">教务处官网</a>
            <a class="btn2" href="https://lib.nefu.edu.cn/">图书馆官网</a>
        </div>
    </div>
    <div>
        <%@include file="/WEB-INF/jsp/footer.jsp" %>
    </div>
</div>
</body>
<script>
    window.onload = () => {
        var lb = document.querySelector("#toleft1")
        var rb = document.querySelector("#right-btn1")
        var ul = document.querySelector("#wrap-ul")
        var lis = ul.getElementsByTagName("li")
        var classes = ["b1", "b1", "cc", "b1", "b1"]
        function toright() {
            var last_class = classes.pop()
            classes.unshift(last_class)
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = classes[i]
            }
        }
        function toleft1() {
            var first_class = classes.shift()
            classes.push(first_class)
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = classes[i]
            }
        }
        rb.onclick = toright;
        lb.onclick = toleft1;
        timer = setInterval(toright, 2000)
        ul.onmouseenter = function () {
            clearInterval(timer)
            timer = null
        }
        ul.onmouseleave = () => {
            timer = setInterval(toright, 2000)
        }
    }
</script>
</html>